<template>
	<NavBar :obj="{ title: title, color: '#000', backgroundColor: '#fff' }" />

	<view class="query">
		<view class="top flex items-center">
			<view class="search flex items-center justify-between flex-1">
				<input type="text" placeholder="请输入用户ID/手机号" class="inp flex-1" placeholder-class="inp-place" v-model="keyword" />
				<view class="search-icon" @click="search">搜索</view>
			</view>
		</view>

		<view class="show-load" v-if="showLoad" style="padding: 30upx">
			<up-loading-icon text="加载中" textSize="13"></up-loading-icon>
		</view>

		<view class="empty" style="padding-bottom: 30rpx" v-if="!searchUser.length && !showLoad && text">
			<up-empty icon="/static/product/ic_zerodata@2x.png" iconSize="192rpx" marginTop="0" :text="text" />
		</view>

		<view class="infos flex items-center justify-between" v-for="(item, index) in searchUser" :key="index">
			<view class="photo">
				<image :src="imgUrl + item.photo"></image>
			</view>
			<view class="composite flex-1">
				<view class="nickname-top flex items-center">
					<view class="nickname line-1-clamp" style="max-width: 50%">{{ item.nickname }}</view>
				</view>
				<view class="bottom flex items-center">
					<view class="item flex items-center">
						<text>{{ item.mobile }}</text>
					</view>
					<view class="item">
						<text>ID：{{ item.code }}</text>
					</view>
				</view>
			</view>
			<view class="add-btn" @click="addUser(item)">添加</view>
		</view>
	</view>

	<view class="added" v-if="type == 1">
		<view class="big-title" v-if="addUserList.length">已添加股东</view>

		<view class="infos flex items-center justify-between" v-for="(item, index) in addUserList" :key="index">
			<view class="photo">
				<image :src="imgUrl + item.photo"></image>
			</view>
			<view class="composite flex-1">
				<view class="nickname-top flex items-center">
					<view class="nickname line-1-clamp" style="max-width: 50%">{{ item.nickname }}</view>
				</view>
				<view class="bottom flex items-center">
					<view class="item flex items-center">
						<text>{{ item.mobile }}</text>
					</view>
					<view class="item">
						<text>ID：{{ item.code }}</text>
					</view>
				</view>
			</view>
			<view class="add-btn del" @click="delUser(index)">删除</view>
		</view>

		<view class="empty" style="padding: 60rpx" v-if="!addUserList.length">
			<up-empty icon="/static/product/ic_zerodata@2x.png" iconSize="192rpx" marginTop="0" text="尚未添加股东" />
		</view>
	</view>

	<view class="fixed-bottom" v-if="type == 1">
		<view class="btn" @click="submit">
			<text>确定</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, nextTick, reactive, h } from 'vue';
	import { port, goUrl, imgUrl, hint, loading, closeLoading, goBack, goIndex } from '../../service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';

	const keyword = ref('');
	const searchUser = ref([]);
	const addUserList = ref([]);
	const showLoad = ref(false);
	const text = ref('');
	const title = ref('添加股东');
	const type = ref(1);

	onLoad((e) => {
		if (e.title) {
			title.value = e.title;
			type.value = 2;
		}
	});

	onShow(() => {
		if (uni.getStorageSync('shareholder')) {
			addUserList.value = uni.getStorageSync('shareholder');
		}
	});


	function addUser(item) {
		if (type.value == 1) {
			let bool = true;
			addUserList.value.forEach((v) => {
				if (v.id == item.id) {
					bool = false;
				}
			});

			if (!bool) {
				hint('已添加过此股东');
			} else {
				addUserList.value.push(item);
				keyword.value = '';
				searchUser.value = [];
			}
		} else {
			uni.showModal({
				title: '请确认',
				content: '确定要添加此房东吗？',
				confirmColor: '#F81A2E',
				success: async function (res) {
					if (res.confirm) {
						loading();
						let res = await port('addLandlord', { uid: item.id });

						setTimeout(() => {
							hint(res.msg);
							closeLoading();
							goBack();
						}, 300);
					}
				}
			});
		}
	}

	function submit() {
		uni.setStorageSync('shareholder', addUserList.value);
		goBack();
	}

	function delUser(index) {
		addUserList.value.splice(index, 1);
	}

	function search() {
		if (!keyword.value) {
			hint('请输入股东用户ID/手机号');
			return false;
		}
		showLoad.value = true;
		port('selectUser', { keyword: keyword.value })
			.then((e) => {
				showLoad.value = false;
				searchUser.value = e.data;
				if (!e.data.length) {
					text.value = '未查询到相关股东';
				}
			})
			.catch((e) => {
				text.value = '未查询到相关股东';
				showLoad.value = false;
			});
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f0f0f0;
	}
	.show-load {
		padding: 30rpx;
	}
	.added {
		background: #ffffff;
		padding: 0 30rpx;
		.big-title {
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			padding-top: 24rpx;
		}
	}

	.query {
		margin: 0 30rpx 30rpx 30rpx;
		.top {
			padding: 30rpx;
			padding-bottom: 36rpx;
			.left-icon {
				margin-right: 19rpx;
			}
			.search {
				background: #ffffff;
				border-radius: 36rpx;
				padding: 6rpx;

				.inp {
					font-weight: 400;
					font-size: 26rpx;
					margin-left: 15rpx;
				}
				.inp-place {
					color: #bdbdbd;
				}
				.search-icon {
					width: 120rpx;
					height: 56rpx;
					line-height: 56rpx;
					background: linear-gradient(0deg, #f81a2e 0%, #fc4856 100%);
					border-radius: 30rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #ffffff;
					text-align: center;
				}
			}
		}
	}

	.infos {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		border-bottom: 1rpx solid #eee;
		&:last-child {
			border-bottom: none;
		}
		.add-btn {
			font-weight: 400;
			font-size: 28rpx;
			color: #f81a2e;
			border-radius: 16rpx;
			border: 1px solid #f81a2e;
			padding: 8rpx 20rpx;
		}

		.del {
			color: #666666;
			border: 1px solid #cccccc;
		}

		.photo {
			background: #ffffff;
			box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(228, 47, 4, 0.26);
			border-radius: 50%;
			border: 5rpx solid #ffffff;
			width: 94rpx;
			height: 94rpx;
			> image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.composite {
			margin-left: 22rpx;
			.nickname-top {
				.nickname {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}
			}

			.bottom {
				margin-top: 15rpx;
				gap: 35rpx;
				.item {
					> text {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
					}
				}
			}
		}
	}
</style>
